<template>
    <div>
        <el-tabs @tab-click="handleClick" v-model="activeName" class="p15">
            <el-tab-pane v-for="(tab, index) in tabData" :label="tab.label" :name="tab.name" :key="index"></el-tab-pane>
        </el-tabs>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tabData: [
                    {
                        label: '管理员',
                        name: 'admin'
                    },
                    {
                        label: '销售',
                        name: 'sales'
                    },
                    {
                        label: '客服',
                        name: 'customer_service'
                    },
                    {
                        label: '财务',
                        name: 'finance'
                    }
                ],
                activeName: 'admin'
            }
        },
        // created() {
        //     if (this.$route.fullPath.includes('/agent_profit/agent_product_template')) {
        //         this.activeName = 'agent_product_template'
        //     } else if (this.$route.fullPath.includes('/agent_profit')) {
        //         this.activeName = 'index'
        //     }
        // },
        methods: {
            handleClick(tab) {
                var path = '/users/'+ tab.name
                if (tab.name === 'admin') {
                    path = '/users'
                }
                this.$router.push({
                    path: path
                })
            }
        },
        watch: {
            $route: {
                handler: function(to) {
                    this.tabData.forEach((tab) => {
                        // if (to.name == '公众市场') {
                        //     to.name = 'index'
                        // }
                        this.activeName = to.name
                        if (tab.name == to.name) {
                            this.activeName = to.name
                        }
                    });
                },
                // 深度观察监听
                deep: true
            }
        }
    }
</script>

<style scoped>

</style>